<template>
  <div id="app">
    <p>来说说你想说什么</p>
    <input v-model="zhangh" type="text" class="borDer" />
    <p class="borDer2">
      <span @click="huoqu" class="hei">
        <img src="../assets/weibo1.png" alt="" />
      </span>
      <span>
        <img @click="huoqu1" src="../assets/weibo2.png" alt="" />
      </span>
      <span>
        <img @click="huoqu2" src="../assets/weibo3.png" alt="" />
      </span>
      <span>
        <img @click="huoqu3" src="../assets/weibo4.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo1.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo2.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo3.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo4.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo1.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo2.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo3.png" alt="" />
      </span>
      <span>
        <img src="../assets/weibo4.png" alt="" />
      </span>
    </p>
    <textarea
      name=""
      id=""
      cols="30"
      maxlength="136"
      rows="10"
      placeholder="站长素材"
      v-model="val"
      @input="numBer"
    >
    </textarea>
    <p class="dwl">
      <span class="wz">还能输入{{ val1 }}个字</span>
      <span @click="tianjia" class="guangbo"> 广播 </span>
    </p>
    <p class="dajia">
      <span> 大家都在说 </span>
    </p>
    <ul>
      <li>
        <img src="../assets/weibo1.png" alt="" />
        <span class="mingzi">永不上线</span>
        <span class="xinxi">:新增功能</span>
        <span class="shijian">07月05日 12:20</span>
      </li>
      <li>
        <img src="../assets/weibo2.png" alt="" />
        <span class="mingzi">永不上线</span>
        <span class="xinxi">:新增功能</span>
        <span class="shijian">07月05日 12:20</span>
      </li>
      <li>
        <img src="../assets/weibo3.png" alt="" />
        <span class="mingzi">永不上线</span>
        <span class="xinxi">:新增功能</span>
        <span class="shijian">07月05日 12:20</span>
      </li>
      <li v-for="(value, index) in arr" :key="index">
        <img v-bind:src="value.srcc" alt="" />
        <span class="mingzi">{{ value.zhanghao }}</span>
        <span class="xinxi">:{{ value.wenzi }}</span>
        <span class="shijian">{{ value.shijian }}</span>
      </li>
    </ul>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background: #a8aa8d;
}
#app {
  width: 800px;
  overflow: hidden;
  margin: 50px auto;
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
.borDer {
  width: 200px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 4px;
  margin-top: 10px;
  float: left;
  outline: none;
  padding-left: 10px;
  box-sizing: border-box;
}
.borDer2 {
  float: left;
  margin-left: -10px;
  margin-top: 10px;
  margin-right: 100px;
}
.borDer2 span {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}
.borDer2 span img {
  width: 20px;
  height: 20px;
}
.borDer2 .hei {
  width: 20px;
  height: 20px;
  opacity: 1;
}
.hei img {
  width: 20px;
  height: 20px;
}
textarea {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  border-radius: 8px;
  outline: none;
  padding-left: 10px;
  padding-top: 10px;
  box-sizing: border-box;
  resize: none;
}
.wz {
  margin-left: 500px;
}
.guangbo {
  display: inline-block;
  width: 60px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  border-radius: 4px;
  background: #8bc430;
  margin-left: 40px;
}
.dajia {
  position: relative;
  width: 100%;
  height: 40px;
  background: #e3eaec;
}
.dajia span {
  position: absolute;
  bottom: 0;
  left: 30px;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
  background: #fff;
}
ul {
  width: 100%;
}
li {
  list-style: none;
  padding: 10px;
  position: relative;
}
li img {
  width: 40px;
  height: 40px;
}
.mingzi {
  color: #434d6c;
  margin-top: -20px;
  position: absolute;
  top: 30px;
  left: 70px;
}
.xinxi {
  margin-top: -20px;
  position: absolute;
  top: 30px;
  left: 140px;
}
.shijian {
  margin-left: 14px;
}
</style>
<script>
export default {
  data() {
    return {
      val: "",
      val1: "136",
      arr: [],
      zhangh: "",
      sj: "",
      sgg: "",
    };
  },
  methods: {
    /* 数字监听 */
    numBer() {
      this.val1 = 136 - this.val.length;
    },
    /* 获取 */
    huoqu() {
      this.sgg = require("../assets/weibo1.png");
    },
    huoqu1() {
      this.sgg = require("../assets/weibo2.png");
    },
    huoqu2() {
      this.sgg = require("../assets/weibo3.png");
    },
    huoqu3() {
      this.sgg = require("../assets/weibo4.png");
    },
    /* 添加 */
    tianjia() {
      var date = new Date().getMonth();
      var date1 = new Date().getDay();
      var date2 = new Date().getHours();
      var date3 = new Date().getMinutes();
      if (date1 < 10) {
        date1 = "0" + date1;
      }
      if (date < 10) {
        date = "0" + date + "月" + date1 + "日" + " " + date2 + ":" + date3;
      }
      if (date3 < 10) {
        date3 = "0" + date3;
      }
      this.sj = date;
      this.arr.push({
        srcc: this.sgg,
        zhanghao: this.zhangh,
        wenzi: this.val,
        shijian: this.sj,
      });
      console.log(this.arr);
    },
  },
};
</script>


